<template>
	<view class="main">
		<view class="imgBox">
			<view v-if="base64Str" class="imgBgc"
				:style="{ width: specification.px[0] + 'rpx', height: specification.px[1] + 'rpx' }">
				<image :src="`data:image/png;base64,${base64Str}`" mode="widthFix" />
			</view>
		</view>
		<canvas type="2d" id="myCanvas" style="width: 100%; height: 100%; position: fixed; left: -9999px;"></canvas>
		<view class="setBtns">
			<view>
				<image src="/static/bgcColor.png" mode="heightFix" />
				<text>换底色</text>
			</view>
			<view>
				<image src="/static/text.png" mode="heightFix" />
				<text>加文字</text>
			</view>
			<view>
				<image src="/static/expression.png" mode="heightFix" />
				<text>换表情</text>
			</view>
			<view>
				<image src="/static/clothing.png" mode="heightFix" />
				<text>换形象</text>
			</view>
		</view>
		<view class="bottom">
			<view @click="handleDownloadImg" class="btn-download">下载电子照</view>
			<view class="btn-printing">冲印排版照</view>
		</view>
	</view>
</template>

<script>
const http = uniCloud.importObject("IdPhoto")
export default {
	data() {
		return {
			imgSrc: "",
			base64Str: ""
		};
	},
	computed: {
		specification() {
			return this.$store.state.specification;
		},
	},
	onLoad(options) {
		if (options.imagePath) {
			this.handleTransparent(decodeURIComponent(options.imagePath))
		}
	},
	methods: {
		async handleTransparent(imgurl) {
			const base64 = await uni.getFileSystemManager().readFileSync(imgurl, 'base64');
			const res = await http.getTransparentPictures(base64, this.specification.px)
			console.log(res);
			if (res.code === 200) {
				this.base64Str = res.data
			} else {
				uni.showToast({
					title: res.msg || "系统异常",
					icon: "error",
				});
			}
		},
		async handleDownloadImg() {
			const res = await http.downloadPicture(this.base64Str, "#438EDB")
			// console.log(res.data);
			if (res.code === 200) {
			// 将base64图片保存到相册
			const filePath = `${wx.env.USER_DATA_PATH}/${Date.now()}.png`
			uni.getFileSystemManager().writeFile({
				filePath,
				data: res.data,
				encoding: 'base64',
				success: () => {
					uni.saveImageToPhotosAlbum({
						filePath,
						success: () => {
							uni.showToast({
								title: '已保存到相册',
								icon: 'success'
							})
						},
						fail: (err) => {
							uni.showToast({
								title: '保存失败',
								icon: 'error'
							})
							console.error('保存到相册失败', err)
						}
					})
				},
				fail: (err) => {
					uni.showToast({
						title: '写入文件失败',
						icon: 'error'
					})
					console.error('写入文件失败', err)
				}
			})
			}
		},
	},
};
</script>

<style scoped lang="scss">
.main {
	background-color: #f3f4f6;
	text-align: center;
}

.imgBox {
	background-color: #fff;
	box-shadow: 0rpx 8rpx 12rpx 0rpx rgba(0, 0, 0, 0.05);
	display: inline-block;
	padding: 8rpx;
	margin-top: 32rpx;

	.imgBgc {
		background-color: #438EDB;
		overflow: hidden;

		image {
			display: block;
			width: 100%;
		}
	}

}

.setBtns {
	width: 100%;
	position: fixed;
	bottom: 140rpx;
	display: flex;
	align-items: center;
	display: flex;
	align-items: center;
	justify-content: space-around;
	padding: 0 32rpx;
	box-sizing: border-box;

	view {
		display: flex;
		align-items: center;
		flex-direction: column;
	}

	image {
		height: 50rpx;
	}

	text {
		margin-top: 12rpx;
		font-size: 28rpx;
	}
}

.bottom {
	position: fixed;
	bottom: 0;
	left: 0;
	display: flex;
	gap: 24rpx;
	width: 100%;
	padding: 12rpx 24rpx;
	box-sizing: border-box;
	background-color: #fff;

	view {
		flex: 1;
		color: #fff;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		border-radius: 12rpx;
	}

	.btn-download {
		color: #378bfb;
		border: 2rpx solid #378bfb;
	}

	.btn-printing {
		background-color: #378bfb;
		color: #fff;
	}
}
</style>